<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Badges</h1>
                        <small>Small and adaptive tag for adding context to just about any content.</small>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>

                    </header>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Basic examples</h2>
                            <small class="card-subtitle">Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.</small>
                        </div>

                        <div class="card-block">
                            <h1>Example heading <span class="badge badge-default">New</span></h1>
                            <br/>
                            <h2>Example heading <span class="badge badge-default">New</span></h2>
                            <br/>
                            <h3>Example heading <span class="badge badge-default">New</span></h3>
                            <br/>
                            <h4>Example heading <span class="badge badge-default">New</span></h4>
                            <br/>
                            <h5>Example heading <span class="badge badge-default">New</span></h5>
                            <br/>
                            <h6>Example heading <span class="badge badge-default">New</span></h6>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Contextual variations</h2>
                            <small class="card-subtitle">Add any of the below mentioned modifier classes to change the appearance of a badge.</small>
                        </div>

                        <div class="card-block">
                            <span class="badge badge-default">Default</span>
                            <span class="badge badge-primary">Primary</span>
                            <span class="badge badge-success">Success</span>
                            <span class="badge badge-info">Info</span>
                            <span class="badge badge-warning">Warning</span>
                            <span class="badge badge-danger">Danger</span>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Pill badges</h2>
                            <small class="card-subtitle">Use the <code>.badge-pill</code> modifier class to make badges more rounded. Useful if you miss the badges from v3.</small>
                        </div>

                        <div class="card-block">
                            <span class="badge badge-pill badge-default">Default</span>
                            <span class="badge badge-pill badge-primary">Primary</span>
                            <span class="badge badge-pill badge-success">Success</span>
                            <span class="badge badge-pill badge-info">Info</span>
                            <span class="badge badge-pill badge-warning">Warning</span>
                            <span class="badge badge-pill badge-danger">Danger</span>
                        </div>
                    </div>
                </div>

                
            </div></template>